<template>
  <div>
    <div class="container">
      <!-- 查询盒子 -->
      <div class="searchbox">
        <table class="all_tb" cellspacing="10">
          <tr>
            订单编号：
            <th>
              <el-input placeholder="订单编号查询"></el-input>
            </th>
            客户姓名：
            <th>
              <el-input placeholder="客户姓名查询"></el-input>
            </th>
            单位：
            <th>
              <el-input placeholder="单位查询"></el-input>
            </th>
            订单日期:
            <th>
              <el-date-picker
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
              >
              </el-date-picker>
            </th>
          </tr>
        </table>

       <div class="exports">
          <el-button type="primary" @click="exportData">导出到excel</el-button>

          <el-button type="primary" icon="el-icon-search" @click="search(form)"
            >查询</el-button
          >
          <el-button type="primary" icon="el-icon-refresh-right" @click="reset"
            >重置</el-button
          >
        </div>
      </div>

      <!-- ===================================== -->
      <!-- 状态：未处理、已审核、审核通过、审核未通过 -->
      <div class="status">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- 第一部分 -->
          <el-tab-pane label="未审核" name="first">
            <!-- 未处理 -->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                fixed
                prop="order_number"
                label="订单编号"
                width="150"
              >
              </el-table-column>
              <el-table-column fixed prop="company" label="单位" width="120">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="100">
              </el-table-column>
              <el-table-column prop="type" label="客户级别" width="100">
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间" width="200">
              </el-table-column>
              <el-table-column prop="product_name" label="产品类型" width="100">
              </el-table-column>
              <el-table-column
                prop="order_quantity"
                label="数量（张）"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="good_price" label="单价（元）" width="120">
              </el-table-column>
              <el-table-column prop="allPrice" label="金额" width="120">
              </el-table-column>
              <el-table-column prop="pay_status" label="支付状态" width="120">
              </el-table-column>
              <el-table-column prop="order_status" label="审核状态" width="120">
              </el-table-column>
              <el-table-column prop="online" label="配送方式" width="100">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <!-- 卡号信息按钮 -->
                <el-button @click="isShow" type="text" size="small"
                  >订单详情</el-button
                >
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <!-- 制卡中 -->`
          <el-tab-pane label="已支付" name="second">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                fixed
                prop="order_number"
                label="订单编号"
                width="150"
              >
              </el-table-column>
              <el-table-column fixed prop="company" label="单位" width="120">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="100">
              </el-table-column>
              <el-table-column prop="type" label="客户级别" width="100">
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间" width="200">
              </el-table-column>
              <el-table-column prop="product_name" label="产品类型" width="100">
              </el-table-column>
              <el-table-column
                prop="order_quantity"
                label="数量（张）"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="good_price" label="单价（元）" width="120">
              </el-table-column>
              <el-table-column prop="allPrice" label="金额" width="120">
              </el-table-column>
              <el-table-column prop="pay_status" label="支付状态" width="120">
              </el-table-column>
              <el-table-column prop="order_status" label="审核状态" width="120">
              </el-table-column>
              <el-table-column prop="online" label="配送方式" width="100">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <!-- 卡号信息按钮 -->
                <el-button @click="isShow" type="text" size="small"
                  >订单详情</el-button
                >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="未支付" name="third">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                fixed
                prop="order_number"
                label="订单编号"
                width="150"
              >
              </el-table-column>
              <el-table-column fixed prop="company" label="单位" width="120">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="100">
              </el-table-column>
              <el-table-column prop="type" label="客户级别" width="100">
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间" width="200">
              </el-table-column>
              <el-table-column prop="product_name" label="产品类型" width="100">
              </el-table-column>
              <el-table-column
                prop="order_quantity"
                label="数量（张）"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="good_price" label="单价（元）" width="120">
              </el-table-column>
              <el-table-column prop="allPrice" label="金额" width="120">
              </el-table-column>
              <el-table-column prop="pay_status" label="支付状态" width="120">
              </el-table-column>
              <el-table-column prop="order_status" label="审核状态" width="120">
              </el-table-column>
              <el-table-column prop="online" label="配送方式" width="100">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <!-- 卡号信息按钮 -->
                <el-button @click="isShow" type="text" size="small"
                  >订单详情</el-button
                >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="未通过" name="forth">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                fixed
                prop="order_number"
                label="订单编号"
                width="150"
              >
              </el-table-column>
              <el-table-column fixed prop="company" label="单位" width="120">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="100">
              </el-table-column>
              <el-table-column prop="type" label="客户级别" width="100">
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间" width="200">
              </el-table-column>
              <el-table-column prop="product_name" label="产品类型" width="100">
              </el-table-column>
              <el-table-column
                prop="order_quantity"
                label="数量（张）"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="good_price" label="单价（元）" width="120">
              </el-table-column>
              <el-table-column prop="allPrice" label="金额" width="120">
              </el-table-column>
              <el-table-column prop="pay_status" label="支付状态" width="120">
              </el-table-column>
              <el-table-column prop="order_status" label="审核状态" width="120">
              </el-table-column>
              <el-table-column prop="online" label="配送方式" width="100">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <!-- 卡号信息按钮 -->
                <el-button @click="isShow" type="text" size="small"
                  >订单详情</el-button
                >
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="审核完成" name="fifth">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                fixed
                prop="order_number"
                label="订单编号"
                width="150"
              >
              </el-table-column>
              <el-table-column fixed prop="company" label="单位" width="120">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="100">
              </el-table-column>
              <el-table-column prop="type" label="客户级别" width="100">
              </el-table-column>
              <el-table-column prop="create_time" label="创建时间" width="200">
              </el-table-column>
              <el-table-column prop="product_name" label="产品类型" width="100">
              </el-table-column>
              <el-table-column
                prop="order_quantity"
                label="数量（张）"
                width="120"
              >
              </el-table-column>
              <el-table-column prop="good_price" label="单价（元）" width="120">
              </el-table-column>
              <el-table-column prop="allPrice" label="金额" width="120">
              </el-table-column>
              <el-table-column prop="pay_status" label="支付状态" width="120">
              </el-table-column>
              <el-table-column prop="order_status" label="审核状态" width="120">
              </el-table-column>
              <el-table-column prop="online" label="配送方式" width="100">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <!-- 卡号信息按钮 -->
                <el-button @click="isShow" type="text" size="small"
                  >订单详情</el-button
                >
              </el-table-column>
            </el-table>
            <!-- 已发货 -->
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 状态 -->

      <el-dialog title="订单">
        <el-table :data="gridData">
          <el-table-column
            property="date"
            label="订单编号"
            width="150"
          ></el-table-column>
          <el-table-column
            property="name"
            label="单位"
            width="200"
          ></el-table-column>
          <el-table-column property="address" label="姓名"></el-table-column>
        </el-table>
      </el-dialog>

      <div class="state" v-show="dialogTableVisible">

        <span style="font-size:16px;color:606266;">订单详情</span>
        <el-table :data="gridData">
          <el-table-column
            property="date"
            label="订单编号"
            width="150"
          ></el-table-column>

          <el-table-column
            property="name"
            label="单位"
            width="200"
          ></el-table-column>

          <el-table-column property="address" label="姓名"></el-table-column>
        </el-table>

        
      </div>

      <el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination>
    </div>


  </div>
</template>

<script>
import { getAllOrderApi } from "../../api/BigCustomer/orderlist";
export default {
  mounted() {
    // console.log(this.false)
    this.orderData();
  },
  data() {
    return {
      activeName: "first",
      tab_index: 0,
      tableData: [
        {
          order_number: "",
          company: "",
          name: "",
          type: "",
          create_time: "",
          product_name: "",
          order_quantity: "",
          good_price: "",
          good_all: "",
          pay_status: "",
          order_status: "",
          online: "",
        },
      ],
      gridData: [
        {
          date: "510145224512785060",
          name: "李四",
          address: "利通机械",
        },
        
      ],
      dialogTableVisible: false,
    };
  },
  methods: {
    isShow() {
      this.dialogTableVisible = !this.dialogTableVisible;
    },
    handleClick(tab) {
      console.log(tab.index);
      this.tab_index = tab.index;
    },
    // handleClick(row) {
    //   console.log(row);
    // },

    reset() {
      console.log("reset");
      Object.keys(this.form).forEach((key) => (this.form[key] = ""));

      this.showAll();
    },

     exportData() {
      this.excelData = this.tableData;
      this.export2Excel();
    },
    //表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/export2Excel");
        const tHeader = [
          "订单编号",
          "名称",
          "单位",
          "客户级别",
          "创建时间",
          "支付时间",
          "支付状态",
          "数量",
          "单价",
          "支付金额",
          "审核状态",
          "配送方式",
        ]; // 导出的excel表头名信息
        const filterVal = [
          "order_number",
          "name",
          "company",
          "type",
          "create_time",
          "product_name",
          "pay_date",
          "pay_status",
          "order_quantity",
          "order_stautus",
          "online",
          "card_type",
          "type",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "订单"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    /**
     * 状态转换
     */

    changeStatus(item) {
      /**
       * 状态转换
       */
      let temp = 0;
      if ((item.product_name = "年卡")) {
        temp = 100;
      } else {
        temp = 60;
      }
      item.good_price = temp; //单价
      //总价
      item.allPrice = item.order_quantity * temp;

      /*
      时间格式化 时间转换
       */
      item.create_time = this.dayjs(item.create_time).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      /*
      0 1 2 状态转换
      */
      //配送方式
      let m_online = "";
      if (item.online == "0") {
        m_online = "线上";
      } else {
        m_online = "线下";
      }
      item.online = m_online;

      /**
       * 审核支付状态判断
       */

      if (this.tab_index == item.order_status) {
        this.tableData.push(item);
      }

      //支付状态
      let p_status = "";
      if (item.pay_status == "0") {
        p_status = "未支付";
      } else {
        p_status = "已支付";
      }
      item.pay_status = p_status;
      //审核状态
      let o_status = "";
      if (item.order_status == "0") {
        o_status = "审核通过";
      } else if (item.order_status == "1") {
        o_status = "审核未通过";
      } else {
        o_status = "未审核";
      }
      item.order_status = o_status;
    },

    /**
     * 调接口
     */

    orderData() {
      if (this.tab_index == 0) {
        this.tableData=[];
        getAllOrderApi.getAllOrder().then((res) => {
          res.data.forEach((item) => {
            if (item.order_status == 2) {
              this.tableData.push(item);
            }
      this.changeStatus(item);

          });
        });
      }
      if (this.tab_index == 1) {
         this.tableData=[];
        getAllOrderApi.getAllOrder().then((res) => {
          res.data.forEach((item) => {
            if (item.pay_status == 1) {
              this.tableData.push(item);
            }
      this.changeStatus(item);
            
          });
        });
      }
       /**
       * 已完成
       */
      if (this.tab_index == 2) {
         this.tableData=[];
        getAllOrderApi.getAllOrder().then((res) => {
          res.data.forEach((item) => {
            if (item.pay_status == 0) {
              this.tableData.push(item);
            }
      this.changeStatus(item);

          });
        });
      }
        /**
       * 审核通过
       */
      if (this.tab_index == 4) {
         this.tableData=[];
        getAllOrderApi.getAllOrder().then((res) => {
          res.data.forEach((item) => {
            if (item.order_status == 0) {
              this.tableData.push(item);
            }
      this.changeStatus(item);

          });
        });
      }
      /**
       * 审核未通过
       */
      if (this.tab_index == 3) {
         this.tableData=[];
        getAllOrderApi.getAllOrder().then((res) => {
          res.data.forEach((item) => {
            if (item.order_status == 1) {
              this.tableData.push(item);
            }
      this.changeStatus(item);

          });
        });
      }

    },
  },
  watch: {
    tab_index() {
      this.orderData();
    },
  },
};
</script>

<style scoped>
.state {
  position: absolute;
  z-index: 10;
  top: 200px;
  left: 210px;
  width: 1200px;
  height: 537px;
  background-color: #fff;
}
.container {
  display: flex;
  flex-direction: column;
  margin: 20px auto auto 20px;
}

.searchbox {
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
}

.exports{
  display: flex;
  position: relative;
  top: 64px;
  right: 10px;

}

.exports .el-button{
  height: 50px;
}
</style>
